Lo vi, me llamó la atención y lo puse en práctica.
El efecto queda genial lo podéis ver en mi blog de pruebas, se trata de añadir una burbuja y en su interior el número de comentarios de cada entrada.
El artífice de este invento es nuestro querido amigo Pizcos, vamos a seguir sus explicaciones pero aún así recomiendo ver su blog porque seguro que más de uno quedara encantado con todo lo que nos enseña.
Como de costumbre ubicamos ]]></b:skin> y justo antes añadimos:
.numComments {
background: url(url-imagen) no-repeat top right;
float:right;
text-align: center;
padding: 10px 0 0 0;
font-size: 150%;
width: 50px;
height:50px;
color: #fff;
}

.numComments a:link{
color: #CODIGO HEXADECIMAL;
}
.numComments a:visited{
color: #CODIGO HEXADECIMAL;
}
.numComments a:hover{
color: #CODIGO HEXADECIMAL;
}


Guardamos los cambios y expandimos la plantilla de artilugios donde buscaremos:
<b:if cond='data:post.title'>
Justo después añadiremos:
<span class='numComments'><a expr:href='data:post.url'><data:post.numComments/></a></span>
Si deseamos que nuestra página abra por la página de los comentarios en lugar del anterior código añadiremos:
<span class='numComments'><a expr:href='data:post.addCommentUrl'><data:post.numComments/></a></span>

Veamos lo que según Pizcos podemos modificar:
.numComments {
background: url(url-imagen) no-repeat top right; Aquí definimos la imagen y su posición.
float:right; Posición de todo el elemento.
text-align: center; Alineamos el texto.
padding: 10px 0 0 0; Posicionamos el numero.
font-size: 150%; Tamaño del número.
width: 50px; Ancho del conjunto, la imagen es de 50*50 pixeles.
height:50px; Alto del conjunto.
color: #fff; Color de la fuente.
.numComments a:link Color del número.
.numComments a:visited Color del link una vez visitado.
.numComments a:hover Color al pasar el mouse.

Colores hexadecimales.

Pizcos proporciona un zip conteniendo las imágenes que son las siguientes y también podéis guardar desde aquí.
Como veréis hay colores para todos los gustos y combinables con cualquier blog sea cual sea el color que tengamos, aún así Pizcos se ha ofrecido para crear globos de comentarios en otros colores, si este es tu caso no dudes en ponerte en contacto con él.



primera página12última página
Jaume Solé

Lo siento, no he sido capaz de incorporar la imagen del globo. Me salen el número de comentarios pero no la imagen.

Jaume

Responder
Jo

Hola Gema!
He implementado este codigo y todo va bien, solo que no puedo eliminar el numero de los comentarios despues del post...sabes que tengo que hacer?
Gracias de todo

Responder
Gem@

Jo para que no se visualice el número de comentarios justo después del post es suficiente con acceder a plantilla de diseño y en "Entradas del blog/Editar" asegúrate que no esté marcada la casilla correspondiente a comentarios

Responder
Mr. Chapter

A mi me pasa lo mismo, me sale el pequeño numero pero no la imagen del globo, ademas me sale encima de el titulo

Responder
Mr. Chapter

Me pasa lo mismo que a Jaume

Responder
Gem@

Raúl en tu blog lo veo perfectamente, es el mismo problema del otro día se visualiza con Firefox y con Explorer no.
Prueba a añadir la imagen de esta forma background-image:y aquí el resto.

Responder
Gem@

Jaume Solé Díaz lo lamento no había visto tu comentario hasta ahora, al parecer ya solucionaste el problema por lo que he visto

Responder
Gem@

Raúl mira dónde tienes añadida la url de la imagen que quede de esta forma:
background:url(http://4.bp.blogspot.com/_cXLrfHfNqC4/TKOfLGPG32I/AAAAAAAAAP4/rAEwD4GfinU/s1600/Dibujo.png) no-repeat top right;

Responder
Administrador

Hola, mi problema es que en mi plantilla no aparece el número de comentarios en la portada. Me podrias ayudar?
www.dechivilcoy.com.a

Gracias
Alcides

Responder
Gem@

Administrador la url de la página que me has dejado no funciona, he mirado el blog de tu perfil pero en él si hay enlace a los comentarios lo que ocurre que para verlo hay que visualizar la entrada completa.

Responder
Administrador

Disculpa, tiene un error

http://www.dechivilcoy.com.ar/

Responder
Gem@

Administrador en tu plantilla si sale el número de comentarios pero hay que visualizar la entrada completa, este es un ejemplo:
http://www.dechivilcoy.com.ar/2010/10/rural-bike-en-roque-perez-con-varios.html

El número de comentarios sale en la parte superior derecha de la entrada y en el footer de la entrada, es decir justo al terminar la entrada

Responder
Administrador

Disculpa, evidentemente no he sabido explicarme. Donde no aparecen los números es en la "portada", en la home. En el Inicio.
Quisiera que junto a los títulos de la "portada" se vea el número de comentarios.
Muchas gracias por tu atención.
Disculpa las molestias

Alcides

Responder
SoNi@ CoRRaL

Muchas gracias Gema!! me ha sido muy útil, siendo la primera vez que tocava algo del codigo...prueba superada!!

Responder
Gem@

Administrador no tengo respuesta para eso porque no se trata que este ejemplo no salga en el home sino que tu plantilla no está preparada para mostrar el número de comentarios en el home.

Me alegra que resultara bien Sonia

Responder
Jo

Hola Gema!
Tengo un problema con este codigo: lo he puesto en mi blog de prueba para ver como sale y va todo bien, solo en las paginas estaticas, donde deberia no verse, se vé! Como puedo hacer?

Responder
Jo

Ah, Gema, me estaba olvidando
He clicado sobre la opcion "no permitir" comentarios, entonces no deberia verse!
Gracias por todo!

Responder
Jo

Perdone, no deberia verse, pero se ve, este es el problema! Besitos!

Responder
Gem@

Hola Jo, para qu een las páginas estáticas no se vea se puede condicionar de la siguiente forma:
Justo después de ]]></b:skin> añadimos:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
.numComments {
visibility:hidden;
display:none;
background: url(url-imagen) no-repeat top right;
float:right;
text-align: center;
padding: 10px 0 0 0;
font-size: 150%;
width: 50px;
height:50px;
color: #fff;
}
</style>
</b:if>

Responder
Jo

@Gem@ Graciaaaassss!!!!!
Lo he implementado justo ahora y funciona!!! Gracias gracias gracias!!!

Responder
Gem@

Estupendo Jo

Responder
AUB’S

Hola Gema me pregunto si se puede quitar esto de las burbujas de las paginas estáticas.
Mi blog AUB'S puedes ver que en Contacto sale la burbuja.
De antemano gracias.

Responder
Gem@

AUB’S para evitar que se muestren según que parte del blog en las páginas estáticas mira esta entrada:
http://gemablog-.blogspot.com/2011/03/estilos-para-las-paginas-estaticas.html

Responder
Gem@

AUB’S mira la respuesta para Jo que pregunta lo mismo que tú:

"Para que en las páginas estáticas no se vea se puede condicionar de la siguiente forma"
Justo después de ]]></b:skin> añadimos:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
.numComments {
visibility:hidden;
display:none;
background: url(url-imagen) no-repeat top right;
float:right;
text-align: center;
padding: 10px 0 0 0;
font-size: 150%;
width: 50px;
height:50px;
color: #fff;
}
</style>
</b:if>

Responder
Nicola Stillitani

Primero que nada gracias por esta información. Me has ayudado mucho. El globo me ha quedado bien.

Sin embargo me pregunto si será posible cambiar alguna parte del código para que cuando un lector haga clic en el globo se desplaze hasta la parte de los comentarios en la entrada correspondiente (a diferencia de este caso que se desplaza a la entrada, pero no a la sección de comentarios).

Espero haber sido claro.
Muchas gracias!

Responder
Nicola Stillitani

Primero que nada gracias por esta información. Me has ayudado mucho. El globo me ha quedado bien.

Sin embargo me pregunto si será posible cambiar alguna parte del código para que cuando un lector haga clic en el globo se desplaze hasta la parte de los comentarios en la entrada correspondiente (a diferencia de este caso que se desplaza a la entrada, pero no a la sección de comentarios).

Espero haber sido claro.
Muchas gracias!

Responder
Gem@

Saludos Nicola, precisamente hay unas líneas en la entrada que dicen "Si deseamos que nuestra página abra por la página de los comentarios en lugar del anterior código añadiremos..."
Eso se refiere a lo que deseas hacer porque marcando sobre el globo o burbuja nos lleva al formulario de comentarios.

Responder
simsinspring

teengo un problemitaa , el link me aparece azul hasta que le hago click D:

Responder
simsinspring

el link me aparece azuuul hasta que le hago click, hay alguna forma de solucionarlo?

Responder
Gem@

Prueba añadiendo:
.numComments a{
color: #FBF7E1;
text-decoration:none;
}

Responder
primera página12última página

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top
cargando